<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="handleClose"
  >
    <el-form ref="formAdd" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="role_name">
        <el-input
          v-model="form.role_name"
          :disabled="form.role_name === 'admin'"
          size="mini"
          class="input-one"
          clearable
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="role_desc">
        <el-input
          v-model="form.role_desc"
          :disabled="form.role_name === 'admin'"
          size="mini"
          class="input-one"
          clearable
          placeholder="请输入角色描述"
        ></el-input>
      </el-form-item>

      <!--          <el-form-item label="权限">-->
      <!--            <mk-menu-tree v-model="form.menuIds" :roleId='form.id'/>-->
      <!--            &lt;!&ndash;            <get-perm-info v-model="form.menuIds"/>&ndash;&gt;-->
      <!--          </el-form-item>-->

      <el-form-item label="权限">
        <el-tree
          :data="treeData"
          show-checkbox
          :default-checked-keys="form.menuIds"
          check-strictly
          @check="checkNode"
          node-key="id"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.data.title }}</span>
            <el-tag
              style="margin-left: 8px"
              size="mini"
              v-show="node.data.authority"
              >{{ node.data.authority }}</el-tag
            >
          </span>
        </el-tree>
      </el-form-item>
      <el-alert
        v-if="form.role_name === 'admin'"
        title="** 超级管理员角色不能修改"
        type="warning"
      >
      </el-alert>
      <el-divider />
      <mk-get-button @save="save" @close="handleClose" />
    </el-form>
  </el-dialog>
</template>

<script>
import MkGetButton from "@/components/common/mk-get-button";
import MkBackList from "@/components/common/mk-back-list";

import {
  dirRolesCreate,
  dirRolesOne,
  dirRolesUpdate,
} from "@/api/modules/sys.roles.api";
import MkMenuTree from "@/components/common/mk-menu-tree";
import { dirMenusList } from "@/api/modules/sys.menus.api";
import util from "@/libs/util";
import GetPermInfo from "@/views/system/roles/get-perm-info";

export default {
  name: "get-roles-info",
  components: { GetPermInfo, MkMenuTree, MkBackList, MkGetButton },
  props: {
    updateData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogTitle: "",
      type: null,
      dialogVisible: false,
      commonKey: 0,
      form: {},
      treeData: [],
      defaultKey: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      query: {
        limit: 300,
      },
      isAdd: true,
      rules: {
        role_name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        menuIds: [{ required: true, message: "请选择权限", trigger: "blur" }],
      },
    };
  },
  methods: {
    open(type, typeName, data) {
      this.resetForm();
      this.getTreeData();
      this.type = type;
      this.dialogTitle = typeName;
      this.dialogVisible = true;
      if (data) {
        this.form = data;

        let menusId = [];
        dirRolesOne({ params: { id: data.id } }).then((role) => {
          for (const argument of role.menus) {
            menusId.push(argument.id);
          }
          // console.log(menusId)
          this.$set(this.form, "menuIds", menusId);
          this.form.testId = "123";
        });
      }
    },
    getTreeData() {
      dirMenusList({
        params: {
          id: "",
        },
        limit: 300,
      }).then((res) => {
        this.treeData = this.listToTree(res.data);
      });
    },

    listToTree(list) {
      const tree = [];
      list.forEach((element) => {
        const children_arr = list.filter((ele) => {
          return element.id === ele.pid;
        });
        if (children_arr.length > 0) {
          element.children = children_arr;
        }
        if (element.pid === 1) {
          tree.push(element);
        }
      });
      return tree;
    },

    checkNode(node, keys) {
      console.log(node);
      console.log(keys);
      this.form.menuIds = [...keys.checkedKeys];
    },

    save() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          let _FUC = "";
          _FUC = this.type == "create" ? dirRolesCreate : dirRolesUpdate;
          _FUC(this.form)
            .then((res) => {
              this.$toast.success(
                this.type == "create" ? "添加成功！" : "修改成功！"
              );
              this.dialogVisible = false;
              this.$emit("success");
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    resetForm() {
      this.form = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-tree {
  min-width: 200px;
  width: 400px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;

  .block {
    font-size: 14px;
  }
}
</style>
